<template>
  <div class="common-layout">
    <el-container>
      <el-header >
        <div class="header-div">
          <p class="title">网咖天地后台管理系统</p>
          <el-button type="primary" plain @click="gotoLoginPage" class="gotoLogin">登录其他账号</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="menu-aside" > <el-col :span="12">

          <el-menu
              active-text-color="#ffd04b"
              background-color="rgb(164, 158, 255)"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>菜单</span>
              </template>
              <el-menu-item index="1-1" @click="routerto('/manager/mangerindex')"><router-link to="/manager/mangerindex" class="menu-router" >首页</router-link></el-menu-item>
              <el-menu-item index="1-2" @click="routerto('/manager/usermanager')"><router-link to="/manager/usermanager" class="menu-router">用户管理</router-link></el-menu-item>
              <el-menu-item index="1-3" @click="routerto('/manager/manageitem')"><router-link to="/manager/manageitem" class="menu-router">菜品管理</router-link></el-menu-item>
              <el-menu-item index="1-4" @click="routerto('/manager/couponmanager')"><router-link to="/manager/couponmanager" class="menu-router">优惠卷管理</router-link></el-menu-item>
              <el-menu-item index="1-5" @click="routerto('/manager/commentmanage')"><router-link to="/manager/commentmanage" class="menu-router">评论管理</router-link></el-menu-item>
              <el-menu-item index="1-7" @click="routerto('/manager/ordermanager')"><router-link to="/manager/ordermanager" class="menu-router">订单管理</router-link></el-menu-item>
              <el-menu-item index="1-8" @click="routerto('/manager/manaageitempack')"><router-link to="/manager/manaageitempack" class="menu-router">套餐管理</router-link></el-menu-item>
              <el-menu-item index="1-9" @click="routerto('/manager/earningsmanage')"><router-link to="/manager/earningsmanage" class="menu-router">店铺收益</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/ManagerCustomer')"><router-link to="/manager/ManagerCustomer" class="menu-router">客户咨询</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/PointsManager')"><router-link to="/manager/PointsManager" class="menu-router">积分管理</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/RechargeManager')"><router-link to="/manager/RechargeManager" class="menu-router">充值管理</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/roleManager')"><router-link to="/manager/roleManager" class="menu-router">角色管理</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/imageManager')"><router-link to="/manager/imageManager" class="menu-router">轮播图管理</router-link></el-menu-item>
              <el-menu-item index="1-11" @click="routerto('/manager/computerManager')"><router-link to="/manager/computerManager" class="menu-router">电脑管理</router-link></el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-col></el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import router from "@/router.js";
const routers=useRouter();
const username=ref('商家')
const routerto = async (paths) => {
  await routers.push({path: paths})
}

const gotoLoginPage= ()=>{
  router.push("/login")
}
</script>

<style scoped>
.el-menu-vertical-demo{
  width: 200px;
  left: 0;
}
.food-search {
  margin-left: 350px;
}
.el-popover__popper{

  transform: translateX(-400px);
}
.card-price{
  color: red;
}
.el-popover__popper {
  max-height: 90vh; /* 例如：最大高度为页面高度的90% */
}
.menu-router {
  color: white;
  text-decoration: none; /* 取消下划线 */

}
.menu-select{
  left: 350px;
}
.span-title{
  font-size: 20px;
  font-weight: bold;
  color: #a43145;
  margin-bottom: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  display: block;
}
.span-coupon-description{
  font-size: 15px;
  font-weight: bold;
  color: burlywood;
  margin-bottom: 10px;
}
.span-coupon-number{



  font-size: 15px;
  font-weight: bold;
  color: rosybrown;
}
.span-coupon-validity{
  font-size: 15px;
  font-weight: bold;
  color: brown;
}
.coupon-item{
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f5f5f5;
}
.span-coupon-name{
  font-size: 20px;
  font-weight: bold;
  color: #a43145;
}
.title{
  font-size: 30px;
  font-weight: bold;
  color: black;
  margin: auto;

}
.header-div{
  /*background-color: wheat;*/
  height: 67px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


}
.gotoLogin {
  position: absolute;
  right: 80px;
}

</style>